
<template>
  <div class="layout">
    <button @click="prePic()" v-show="index > 0">上一页</button>
    <button @click="prePic()" v-show="index > 0">上一页</button>
    <img :src="pics[index]" >
    <button @click="nextPic()" v-show="index < pics.length - 1">下一页</button>
  </div>
</template>

<script setup>
  import { ref,reactive } from "vue";
  const pics = [
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
  ]
  let index = ref(0)


  function nextPic(){
    index.value++
  }
  function prePic(){
    index.value--;
  }
</script>

<style scoped>
.layout{
  width: 600px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
  